<template>
  <n-modal
  	v-model:show="props.show"
  	:mask-closable="false"
  	:style="{width: props.width}">
  	<n-card
  		:title="props.title"
  		:bordered="false"
  		size="huge"
  		role="dialog"
  		aria-modal="true">
  		<template #header-extra>
  			<n-icon size="40" color="#2b16cb" @click="close">
  				<CloseIcon />
  			</n-icon>
  		</template>
		<slot v-if="props.show" />
  	</n-card>
  </n-modal>
</template>

<script setup>
import CloseIcon from '@/components/icons/closeIcon'
const props = defineProps({
	show: {
		required: true,
		type: Boolean
	},
	title: {
		requred: true,
		type: String,
		default: () => ''
	},
	width: {
		type: String,
		default: '600px'
	}
})
const emits = defineEmits(['update:show'])
function close () {
	emits('update:show', false)
}
</script>

<style scoped lang="scss">
.n-icon {
	cursor: pointer;
}
</style>